<!-- <script setup> 是 setup函数语法糖，可以将数据、方法、计算属性等定义在同一块代码块中，使代码更简洁、易读。 -->
 <!-- 组合式 -->
<script setup>
import { ref} from 'vue';
const num = ref(10)
</script>

<!-- 选项式 -->
<!-- <script>
export default {
   data(){
    return {
        msg:'hello'
    }
   }
}
</script> -->

<template>

    <div class="box">
        {{ num }}
    </div>
    <div>
        <button @click="num++">{{ num }}</button>
    </div>
    
</template>

<style>
    .box{
        color: red;
    }
</style>